<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>示例表单</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <div id="app">
    <p> 单选 </p>
    <input type="radio" v-model="picked" value="html" id="html">
    <label for="html">HTML</label>
    <input type="radio" v-model="picked" value="js" id="js">
    <label for="js">JS</label>
    <input type="radio" v-model="picked" value="css" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的是: {{ picked }}</p>
    <hr>
    <p> 复选 </p>
    <input type="checkbox" v-model="checked" value="html" id="html">
    <label for="html"> HTML</label>
    <input type="checkbox" v-model="checked" value="js" name="js" id="js">
    <label for="js">JS</label>
    <input type="checkbox" v-model="checked" value="css" name="css" id="css">
    <label for="css">CSS</label>
    <p>选择的是: {{ checked }}</p>
    <hr>
    <p>单select</p>
    <select v-model="selected">
      <option>HTML</option>
      <option value="js">js</option>
      <option value="css">css</option>
    </select>
    <p>选择的是: {{ selected }}</p>
    <hr>
    <p>多select</p>
    <select v-model="multiSelected" multiple>
      <option>HTML</option>
      <option value="js">js</option>
      <option value="css">css</option>
    </select>
    <p>选择的是: {{ multiSelected }}</p>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        picked: 'js',
        checked: ['js', 'css'],
        selected: 'js',
        multiSelected: ['js', 'css']
      }
    })
  </script>
  <script src="" async defer></script>
</body>

</html>